<template>
  <div class="news">
    <naviber />
    <div class="table">
      <p>{{ text }}</p>
    </div>
    <div class="two_nav clearfloat">
      <div class="two_nav_title">新闻资讯</div>
      <div class="item_box">
        <swiper ref="swiper_aboutUs"
                v-if="news_cate.length > 0"
                :options="swiperOption">
          <swiper-slide class="swiper-slide"
                        v-for="(item, index) in news_cate"
                        :key="index">
            <div :to="{ name: 'zh_professional' }"
                 class="two_nav_item"
                 :class="currentNavIndex == item.id ? 'activeNav' : ''"
                 @click="onTabble(item.id, item.title)">
              <span>{{ item.title }}</span>
            </div>
          </swiper-slide>
          <swiper-slide class="swiper-slide">
            <div :to="{ name: 'zh_problem' }"
                 class="two_nav_item"
                 :class="currentNavIndex == '00' ? 'activeNav' : ''"
                 @click="onTabble('00')">
              <span>问题解答</span>
            </div>
          </swiper-slide>
        </swiper>
      </div>
    </div>
    <keep-alive :include="/professional/">
      <router-view ref="chidlen"></router-view>
    </keep-alive>

    <footer_ />
  </div>
</template>
<script>
import { news_article_cate, news_list } from '@/api/news.js'
import naviber from '../naviber/naviber'
import footer_ from '../footer/footer'
export default {
  data() {
    return {
      swiperOption: {
        slidesPerView: 'auto',
        spaceBetween: 0,
        // 鼠标控制滚动
        // mousewheel: {
        //   releaseOnEdges: true
        // },
        //设置点击箭头
        navigation: {
          nextEl: '#swiper-button-next',
          prevEl: '#swiper-button-prev',
        },
        bserver: true, //修改swiper自己或子元素时，自动初始化swiper
        observeParents: true, //修改swiper的父元素时，自动初始化swiper
        //鼠标变成抓手型
        grabCursor: true,
        //开启鼠标滚轮控制Swiper切换
        // mousewheel: true,
      },
      text: '',
      news_cate: [{ title: null }, { title: null }],
      news_list: [],
      currentNavIndex: null,
    }
  },
  components: {
    naviber,
    footer_,
  },
  async mounted() {
    var news_cate;
    if (this.$store.state.headTitle.NewsCate.length > 0) {
      news_cate = this.$store.state.headTitle.NewsCate.CHS
    } else {
      let res = await news_article_cate()
      news_cate = res.data.data.CHS;
      this.$store.commit('changeNewsCate',res.data.data);
    }
    this.news_cate = news_cate

    if (this.$route.query.cid) {

      this.currentNavIndex = this.$route.query.cid
    } else if (this.$store.state.headTitle.NewsCateCurrentCHS) {
    
      this.currentNavIndex = this.$store.state.headTitle.NewsCateCurrentCHS
    } else {
      this.currentNavIndex = this.news_cate[0].id
    }

    this.$store.commit('changeNewsCateCurrentCHS', this.currentNavIndex)

    this.oneStateText(news_cate)
  },

  watch: {
    '$store.state.headTitle.NewsCateCurrentCHS': {
      deep: true,
      handler: function (newValue, oldValue) {
        this.currentNavIndex = newValue
      },
    },
    '$route.query.cid': {
      deep: true,
      handler: function (newValue, obdValue) {
        if (!newValue) return
        this.currentNavIndex = newValue
        if (newValue == '00') {
          this.text = '问题解答'
        } else {
          let index = this.news_cate.findIndex(
            (item) => item.id == this.$route.query.cid
          )
          this.text = this.news_cate[index].title
        }
      },
    },
  },
  methods: {
    initChat() {},
    // 首次加载改变tab文字
    oneStateText(news_cate) {
      let index = news_cate.findIndex((item) => item.id == this.currentNavIndex)
      if (index != -1) {
        this.text = news_cate[index].title
      } else {
        this.text = '问题解答'
      }
    },
    onTabble(id, text) {
      this.currentNavIndex = id
      this.$store.commit('changeNewsCateCurrentCHS', id)
        console.log(this.$refs.chidlen);

      if (id == '00') {
        this.text = '问题解答'
        this.$router.push({ name: 'zh_problem', query: {} })
      } else {
        this.text = text
        try {
          this.$router.push({ name: 'zh_professional' })
        } catch (error) {
          console.log('已经在当前页面了')
        }
      }
       this.$refs.chidlen.$data.currentPage = 1;
    },
  },
}
</script>
<style scoped src="./sass/news.css"></style>
